<template>
	<view class="content">
		<view class="header-box">
			<view class="user-info">
				<image :src="userInfo.avatar"></image>
				<view class="user-name">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="id">ID:{{userInfo.uid}}</view>
				</view>
			</view>
			
			

			<view class="my-team-box">
				<view class="tips-box">
					<view class="tips-name">我的拼团</view>
					<view class="tips-loding" @click="junit('/pages/prefile/my-collage/my-collage', {type: 0})">
						<text>更多</text>
						<image style="width: 11upx; height: 21upx; margin-left: 15upx;" src="../../static/images/index/loding.png"></image>
						
					</view>
				</view>
				<view class="team-item-line">
					<view class="team-item" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 1})">
						<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/order1.png"></image>
						<view>拼团中</view>
						<u-badge type="error" v-if="orderStaus.status_1" :count="orderStaus.status_1" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
					</view>
					<view class="team-item" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 4})">
						<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/order2.png"></image>
						<view>已拼中</view>
						<u-badge type="error" v-if="orderStaus.status_2" :count="orderStaus.status_2" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
					</view>
					<view class="team-item" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 2})">
						<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/order3.png"></image>
						<view>已结束</view>
						<u-badge type="error" v-if="orderStaus.status_3"  :count="orderStaus.status_3" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
					</view>
					<view class="team-item" @click="junit('/pages/prefile/my-collage/my-collage' , {type: 3})">
						<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/order4.png"></image>
						<view>拼团失败</view>
							<u-badge type="error" v-if="orderStaus.status_4" :count="orderStaus.status_4" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
					</view>
				</view>
			</view>
			
			
		</view>
	
	
		<view class="group-box">
			<view class="group-item" @click="junit('/pages/prefile/my-balance/my-balance')">
				<view class="let-tips">
					<text style="color: #2A2A2A; font-size: 22upx;">我的余额</text>
					<view style="color: #FF7747; font-size: 38upx;">{{userInfo.credit2}}</view>
				</view>
				<image src="../../static/images/prefile/qianbao.png" style="width: 79upx; height: 71upx;">
					
				</image>
			</view>
			<view class="group-item" @click="junit('/pages/prefile/my-extension/my-extension')">
				<view class="let-tips">
					<text style="color: #2A2A2A; font-size: 22upx;">我的推广收入</text>
					<view style="color: #FF9421; font-size: 38upx;">{{userInfo.income}}</view>
				</view>
				<image src="../../static/images/prefile/money2.png" style="width: 79upx; height: 71upx;">
				</image>
			</view>
		</view>
	
	
		<view class="orderStatusArr" style="margin-bottom: 20rpx;">
					<view class="tips-box">
						<view class="tips-name">我的订单</view>
						<view class="tips-loding" @click="junit('/pages/prefile/order/order', {type: 0})">
							<text>查看全部</text>
							<image style="width: 11upx; height: 21upx; margin-left: 15upx;" src="../../static/images/index/loding.png"></image>
							
						</view>
					</view>
					<view class="team-item-line">
						<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 1})">
							<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem1.png"></image>
							<view>待付款</view>
							<u-badge type="error" v-if="orderCount[0].total !=  undefined && orderCount[0].total != 0 " :count="orderCount[0].total" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
						</view>
						<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 2})">
							<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem2.png"></image>
							<view>待发货</view>
							<u-badge type="error" v-if="orderCount[1].total != undefined && orderCount[0].total != 0" :count="orderCount[1].total" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
						</view>
						<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 3})">
							<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem3.png"></image>
							<view>待收货</view>
							<u-badge type="error" v-if="orderCount[2].total != undefined && orderCount[0].total != 0"  :count="orderCount[2].total" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
						</view>
						<view class="team-item" @click="junit('/pages/prefile/order/order' , {type: 4})">
							<image style="width: 52upx; height: 52upx;" src="../../static/images/prefile/orderItem4.png"></image>
							<view>已完成</view>
								<u-badge type="error" v-if="orderCount[3].total != undefined && orderCount[0].total != 0" :count="orderCount[3].total" style="position: absolute; right: 25upx; top: -30upx;"></u-badge>
						</view>
					</view>
		</view>
		
		
		<view class="gonneng-box">
			<navigator open-type="switchTab" url="/pages/prefile/my-prize/my-prize" class="gonneng-item">
				<image src="../../static/images/prefile/jianping.png" style="width: 45upx; height: 45upx;"></image>
				<view>我的奖品</view>
			</navigator>
			<view class="gonneng-item" @click="junit('/pages/prefile/my-extension/my-team/my-team')">
				<image src="../../static/images/tabbar/prefile-select.png" style="width: 45upx; height: 45upx;"></image>
				<view>我的团队</view>
			</view>
			<view v-if="userInfo.islevel" class="gonneng-item" @click="junit('/pages/prefile/group-leader/group-leader')">
				<image src="../../static/images/prefile/tuiguang.png" style="width: 45upx; height: 45upx;"></image>
				<view>团主中心</view>
			</view>
			<view class="gonneng-item" @click="junit('/pages/prefile/address/list')">
				<image src="../../static/images/prefile/address.png" style="width: 45upx; height: 45upx;"></image>
				<view>地址管理</view>
			</view>
			<view v-if="isconfig == 1" class="gonneng-item" @click="junit('/pages/prefile/bank-list/bank-list')">
				<image src="../../static/images/prefile/setting.png" style="width: 45upx; height: 45upx;"></image>
				<view>设置</view>
			</view>
			<view class="gonneng-item" @click="showShare">
				<image src="../../static/images/prefile/QRcode.png" style="width: 45upx; height: 45upx;"></image>
				<view>推广海报</view>
			</view>
		</view>
		<view style="color: #D7D7D7; font-size: 33upx;text-align: center; margin-top: 74upx;">口留香新零售</view>
		<shopro-login-modal></shopro-login-modal>
		
		<u-mask :show="share" @click="share = false">
				<view class="warp">
					<view class="rect" @tap.stop @longpress="saveImg(shareIma)">
						<image :src="shareIma"  style="width: 600upx; height: 900upx;"></image>
					</view>
				</view>
		</u-mask>
			
			
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				orderStaus: {},
				share: false,
				shareIma: "",
				isconfig: 0,
				orderCount: undefined,
			};
		},
		computed:{
			...mapState(['userInfo'])
		},
		onLoad() {
			
			
		},
		onShow() {
			this.getPingtuanTongji();
			this.getUserPrefile();
			this.getUserInfo();
		},
		methods:{
			...mapActions(['getUserPrefile']),
			junit(url, query = {}){
				// uni.navigateTo({
				// 	url: url
				// })
				this.$Router.push({path: url, query:query})
			},
			// 拼团统计
			getPingtuanTongji(){
				this.$http.post('user.getptuanTongji').then(res => {
					this.orderStaus = res.data;
				})
			},
			showShare(){
				this.$http.post(`/addons/yun_shop/api.php?i=4&type=2&route=member.poster&ingress=weChatApplet&app_type=wechat`, 
				{i:4, session_id: uni.getStorageSync('session_key')}, {'paramsType': 2}).then(res => {
					
					this.shareIma = res.data.image_url;
					this.share= true;
				})
			},
			getUserInfo(){
				
				this.$http.get('user.member_data').then(res => {
					this.isconfig = res.data.setting.is_user_config;
					this.orderCount  = res.data.order.order
				})
			},
			saveImg(url){
					uni.downloadFile({
						url,
						success: (res) => { 
							console.log(res.tempFilePath)
							// 获取到图片本地地址后再保存图片到相册(因为此方法不支持远程地址)
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: "保存成功！"
									})
								},
								fail: (err) => {
									console.log(err)
								}
							})
						}
					})
			},
		}
	}
</script>

<style scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 600upx;
		height: 900upx;
		background-color: #fff;
	}
</style>

<style scoped lang="scss">
	.content{
		.header-box{
			background-color: #FF7443;
			height: 299upx;
			// background-image: url(../../static/images/prefile/prefile-bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.user-info{
				padding: 30upx 28upx;
				display: flex;
				align-items: center;
				image{
					width: 107upx;
					height: 108upx;
					border-radius: 50%;
				}
				.user-name{
					font-size: 36upx;
					color: #FFFFFF;
					margin-left: 20upx;
					.name{
						font-weight: bold;
					}
				}
			}
			
			.my-team-box{
				width: 700upx;
				height: 204upx;
				background: #FFFFFF;
				box-shadow: 0upx 3upx 68upx 0upx rgba(239, 239, 239, 0.95);
				border-radius: 10upx;
				margin: 0 auto;
				padding: 25upx;
				.tips-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.tips-name{
						font-size: 28upx;
						color: #363433;
						font-weight: bold;
					}
					.tips-loding{
						font-size: 26upx;
						color: #C0C0C0;
					}
				}
				.team-item-line{
					margin-top: 33upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					.team-item{
						width: 25%;
						font-size: 22upx;
						position: relative;
					}
				}
			}
		}
		
		
		.group-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 29upx;
			margin-top: 100upx;
			.group-item{
				background-color: #FDF1EC;
				padding: 27upx;
				width: 334upx;
				height: 136upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		
		.orderStatusArr{
			height: 200rpx;
			width: 700rpx;
			background: #FFFFFF;
			box-shadow: 0upx 3upx 68upx 0upx rgba(239, 239, 239, 0.95);
			border-radius: 10upx;
			margin: 30rpx auto 0;
			padding: 25upx;
			.tips-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tips-name{
					font-size: 28upx;
					color: #363433;
					font-weight: bold;
				}
				.tips-loding{
					font-size: 26upx;
					color: #C0C0C0;
				}
			}
			.team-item-line{
				margin-top: 33upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				.team-item{
					width: 25%;
					font-size: 22upx;
					position: relative;
				}
			}
		}
		
		.gonneng-box{
			width: 700upx;
			// height: 304upx;
			background: #FFFFFF;
			box-shadow: 0px 3upx 68upx 0upx rgba(239, 239, 239, 0.95);
			border-radius: 10upx;
			margin: 22upx auto 0;
			display: flex;
			padding-bottom: 20rpx;
			// justify-content: space-between;
			// align-items: center;
			flex-wrap: wrap;
			.gonneng-item{
				padding-top: 20rpx;
				width: 25%;
				text-align: center;
			}
		}
	}
</style>



<style scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 600upx;
		height: 900upx;
		background-color: #fff;
	}
</style>